import React from 'react'
import style from './style'
import { Link, TitleBar, Table, info } from '../../ui-components'
import cx from 'classnames'
import { bindActionCreators } from 'redux'
import * as reviewAction from '../../actions/review.action'
import { connect } from 'react-redux'
import moment from 'moment'
moment.locale('zh-cn')

export default
@connect(({ review }) => ({ review }), dispatch => ({actions: bindActionCreators({...reviewAction}, dispatch)}))
class ReviewSelfAll extends React.Component {

  pageSize=30
  pageNumber=1
  handlePageChange(_pageNumber) {
    const { pageNumber, ...others } = this.props.location.query
    this.props.router.push(`/review/self/all?pageNumber=${_pageNumber}&${util.body(others)}`)
  }
  doFetch() {
    info('读取中...', true)
    const pageNumber = this.props.location.query.pageNumber || this.pageNumber
    this.props.fetchFinishedSelfReviews({
      pageNumber,
      pageSize: this.pageSize
    }, () => {
      info()
    })
  }
  componentDidMount() {
    this.doFetch()
  }
  render() {
    const { finishedSelfReviews={} } = this.props.review
    const { reviewActivities } = finishedSelfReviews
    const subordinateTable = {
      pagin: typeof totalNumber === 'number' && {
        pageSize: this.pageSize,
        pageNumber: this.props.location.query.pageNumber || this.pageNumber,
        totalNumber,
        onChange: ::this.handlePageChange,
        fetch: ::this.doFetch
      },
      model: {
        templateName: '反馈活动名称',
        status: '状态',
        cycle: '工作阶段',
        selfReviewDeadline: '自评截止日',
        peerReviewDeadline: '同事反馈截止日',
        publicDeadline: '流程结束'
      },
      config: {
        templateName: 1.2,
        status: .8,
        cycle: 1.4,
        selfReviewDeadline: .7,
        peerReviewDeadline: 1.1,
        publicDeadline: .7
      },
      data: reviewActivities,
      map: {
        templateName: (_, args, hover) => {
          return args.isCanceled ? <div>{args.templateName}</div>
                                 : <Link to={`#/review/item/${args.activityId}/activities`}>{args.templateName}</Link>;
        },
        cycle: (_, args) => {
          return moment(args.startTime).format('YYYY.MM.DD') + '~' + moment(args.endTime).format('YYYY.MM.DD')
        },
        status: (_, args) => {
          return <div>
            {
              args.isCanceled ? <span className={cx({[style.status_cancel]: true, [style.status]: true})}>已取消</span> : null
            }
            {
              args.isSubmitted ? <span className={cx({[style.status_submit]: true, [style.status]: true})}>已提交</span> : null
            }
          </div>
        },
        selfReviewDeadline: (value) => {
          return moment(value).format('YYYY.MM.DD')
        },
        peerReviewDeadline: (value) => {
          return moment(value).format('YYYY.MM.DD')
        },
        publicDeadline: (value) => {
          return moment(value).format('YYYY.MM.DD')
        }
      }
    }
    return (
      <div>
        <div className={style.subordinates}>
          <Table
            {...subordinateTable} 
            />
        </div>
      </div>
    )
  }
}
